<template>
  <div id="maps" style="display: flex">
  </div>
</template>

<script>
import * as echarts from "echarts";
import '../../../public/geodata.json'
export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Map',
  mounted(){
    this.initChart()
  },
  methods: {
    initChart() {
      const dom = document.getElementById("china-map");
      const myChart2 = echarts.init(dom);
      let options;
// myChart.showLoading();
      $.when(
          $.getJSON(this.$BaseUrl+'/playerProvince/getall'),
          $.getJSON('./geodata.json'),

      ).done(function (res0,geoJson) {
        const data2=[];
        let dimension1=Object.keys(res0[0][0]);
        res0[0].forEach((values,index)=>{
          data2.push({name:values[dimension1[3]],value:values[dimension1[1]]});
        });
        console.log("__________________________-")
        console.log(data2)
        // myChart.hideLoading();
        echarts.registerMap('china', geoJson[0]);
        myChart2.setOption(
            (options = {
              title: {
                text: '18届各省运动员数',
                subtext: '数据来源:搜狐体育',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c}人'
              },
              toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                  dataView: {readOnly: false},
                  restore: {},
                  saveAsImage: {}
                }
              },
              visualMap: {
                min: 10,
                max: 120,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ['blue', 'yellow', 'orangered',]
                }
              },
              series: [
                {
                  name: '世界地图',
                  type: 'map',
                  map: 'china',
                  zoom:1.25,
                  itemStyle: { // 每个区域的样式
                    normal: {
                      areaColor:'#00ffff',
                      borderColor: '#000000', // 图形的描边颜色
                      borderWidth:0.5 //描边线宽
                    },
                    emphasis: { // 高亮状态
                      areaColor: '#7d7d7d'
                    }
                  },
                  label: {
                    show: false
                  },
                  data:data2

                }
              ]
            })
        );
      });
      if (options && typeof options === 'object') {
        myChart2.setOption(options);
      }
      window.addEventListener("resize",()=>{
        myChart2.resize();
      });
    }
  }
}
</script>

<style>
#container{
  margin: 0;
  padding: 0;
  display: flex;
}
#maps{
  width: 100%;
  height:100%;
}
</style>

